<div class="apes-customer-complaint">

  <!--客诉处理效率-->
  <apes-card apesTitle="客诉处理效率">

    <!--查询区-->
    <div apes-row [apesGutter]="16" class="apes-item" style="padding: 16px;">
      <formly-form [model]="efficiencyModel" [fields]="efficiencyField"></formly-form>
      <div apes-col [apesSpan]="4">
        <button apes-button [apesSize]="'default'" (click)="refreshEfficiencyData()">刷新</button>
      </div>
    </div>

    <!--展示区-->
    <div apes-row [apesGutter]="16">
      <div apes-col [apesSpan]="24">
        <apes-charts [id]="'efficiency'" [data]="efficiencyData" [option]="efficiencyOption"
                     [loading]="efficiencyLoading"></apes-charts>
      </div>
    </div>

  </apes-card>

  <!--客诉耗时-->
  <apes-card apesTitle="客诉耗时">

    <!--查询区-->
    <div apes-row [apesGutter]="16" class="apes-item" style="padding: 16px;">
      <formly-form [model]="staffModel" [fields]="staffField"></formly-form>

      <div apes-col [apesSpan]="4">
        <button apes-button [apesSize]="'default'" (click)="refreshStaffData()">刷新</button>
      </div>
    </div>

    <!--展示区-->
    <div apes-row [apesGutter]="16" apesType="flex" apesJustify="center">
      <div apes-col [apesSpan]="10">

        <apes-table #staffTable
                    apesBordered
                    apesSize="small"
                    [apesScroll]="{ y: '500px' }"
                    [apesFrontPagination]="false"
                    [apesShowPagination]="false"
                    [apesLoading]="staffLoading"
                    [apesData]="staffData">
          <thead>
          <tr>
            <th style='width: 20%' [apesAlign]="'center'">员工</th>
            <th style='width: 40%' colspan="2" class="colspan">
              <span>客服回访平均耗时</span>
              <span>较上一个月</span>
            </th>
            <th style='width: 40%' colspan="2" class="colspan">
              <span>任务数</span>
              <span>较上一个月</span>
            </th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let data of staffTable.data">
            <td style='width: 20%' [apesAlign]="'center'">{{data.OPERATOR_NAME}}</td>
            <td style='width: 20%' [apesAlign]="'left'">{{data.AVERAGE_CONSUME}}分钟</td>
            <td style='width: 20%' [apesAlign]="'right'"
                [ngClass]="showStaffClass(data['OLD_AVERAGE_CONSUME'],data.AVERAGE_CONSUME)">
              <span *ngIf="showStaffClass(data['OLD_AVERAGE_CONSUME'],data.AVERAGE_CONSUME) == 'showUp'">
                <i apes-icon apesType="arrow-up"></i>
              </span>
              <span *ngIf="showStaffClass(data['OLD_AVERAGE_CONSUME'],data.AVERAGE_CONSUME) == 'showDown'">
                <i apes-icon apesType="arrow-down"></i>
              </span>
              <span>{{showStaffText(data['OLD_AVERAGE_CONSUME'], data.AVERAGE_CONSUME, true)}}分钟</span>
            </td>
            <td style='width: 20%' [apesAlign]="'left'">{{data.TASK}}</td>
            <td style='width: 20%' [apesAlign]="'right'" [ngClass]="showStaffClass(data['OLD_TASK'],data.TASK)">
              <span *ngIf="showStaffClass(data['OLD_TASK'],data.TASK) == 'showUp'">
                <i apes-icon apesType="arrow-up"></i>
              </span>
              <span *ngIf="showStaffClass(data['OLD_TASK'],data.TASK) == 'showDown'">
                <i apes-icon apesType="arrow-down"></i>
              </span>
              <span>{{showStaffText(data['OLD_TASK'], data.TASK)}}</span>
            </td>
          </tr>
          </tbody>
        </apes-table>

      </div>
    </div>

  </apes-card>

  <!--客诉处理数量-->
  <apes-card apesTitle="客诉处理数量">

    <!--查询区-->
    <div apes-row [apesGutter]="16" class="apes-item" style="padding: 16px;">
      <formly-form [model]="quantityModel" [fields]="quantityField"></formly-form>
      <div apes-col [apesSpan]="4">
        <button apes-button [apesSize]="'default'" (click)="refreshQuantityData()">刷新</button>
      </div>
    </div>

    <!--展示区-->
    <div apes-row [apesGutter]="16">
      <div apes-col [apesSpan]="24">
        <apes-charts [id]="'quantity'" [data]="quantityData" [option]="quantityOption"
                     [loading]="quantityLoading"></apes-charts>
      </div>
    </div>

  </apes-card>

  <!--结单客诉满意率-->
  <apes-card apesTitle="结单客诉满意率">

    <!--查询区-->
    <div apes-row [apesGutter]="16" class="apes-item" style="padding: 16px;">
      <formly-form [model]="satisfactionModel" [fields]="satisfactionField"></formly-form>
      <div apes-col [apesSpan]="4">
        <button apes-button [apesSize]="'default'" (click)="refreshSatisfactionData()">刷新</button>
      </div>
    </div>

    <!--展示区-->
    <div apes-row [apesGutter]="16">
      <div apes-col [apesSpan]="12">
        <apes-charts [id]="'satisfaction'" [data]="satisfactionData" [option]="satisfactionOption"
                     [loading]="satisfactionLoading"></apes-charts>
      </div>

      <div apes-col [apesSpan]="6">

        <apes-table #satisfactionTable
                    apesBordered
                    apesSize="small"
                    [apesFrontPagination]="false"
                    [apesShowPagination]="false"
                    [apesLoading]="satisfactionLoading"
                    [apesData]="satisfactionGirdData">
          <thead>
          <tr>
            <th style='width: 40%' [apesAlign]="'center'">客户满意度</th>
            <th style='width: 60%' colspan="2" class="colspan">
              <span>本月百分比</span>
              <span>较上一个月</span>
            </th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let data of satisfactionTable.data">
            <td style='width: 40%' [apesAlign]="'center'">{{data.name}}</td>
            <td style='width: 30%' [apesAlign]="'left'">{{data.tMonth}}%</td>
            <!--            <td style='width: 30%' [apesAlign]="'right'">{{data.fMonth}}</td>-->
            <td style='width: 30%' [apesAlign]="'right'" [ngClass]="showStaffClass(data.fMonth,data.tMonth)">
              <span *ngIf="showStaffClass(data.fMonth,data.tMonth) == 'showUp'">
                <i apes-icon apesType="arrow-up"></i>
              </span>
              <span *ngIf="showStaffClass(data.fMonth,data.tMonth) == 'showDown'">
                <i apes-icon apesType="arrow-down"></i>
              </span>
              <span>{{showStaffText(data.fMonth, data.tMonth, true)}}%</span>
            </td>
          </tr>
          </tbody>
        </apes-table>

      </div>
    </div>

  </apes-card>

  <!--客诉率-->
  <apes-card apesTitle="客诉率">

    <!--查询区-->
    <div apes-row [apesGutter]="16" class="apes-item" style="padding: 16px;">
      <formly-form [model]="complaintModel" [fields]="complaintField"></formly-form>
      <div apes-col [apesSpan]="4">
        <button apes-button [apesSize]="'default'" (click)="refreshComplaintData()">刷新</button>
      </div>
    </div>

    <!--展示区-->
    <div apes-row [apesGutter]="16">
      <div apes-col [apesSpan]="24">
        <apes-charts [id]="'complaint'" [data]="complaintData" [option]="complaintOption"
                     [loading]="complaintLoading"></apes-charts>
      </div>
    </div>

  </apes-card>

  <!--客诉类别/类型-->
  <apes-card apesTitle="客诉类别/类型">

    <!--查询区-->
    <div apes-row [apesGutter]="16" class="apes-item" style="padding: 16px;">
      <formly-form [model]="typesOfModel" [fields]="typesOfField"></formly-form>
      <div apes-col [apesSpan]="4">
        <button apes-button [apesSize]="'default'" (click)="refreshTypesOfData()">刷新</button>
      </div>
    </div>

    <!--展示区-->
    <div apes-row [apesGutter]="16" apesType="flex" apesJustify="center">
      <div apes-col [apesSpan]="16">

        <apes-table #typesOfTable
                    apesBordered
                    apesSize="small"
                    class="customer-complaint-typesOf-table"
                    [apesScroll]="{ x: '30vw',y: '600px' }"
                    [apesFrontPagination]="false"
                    [apesShowPagination]="false"
                    [apesLoading]="typesOfLoading"
                    [apesData]="typesOfData">
          <thead>
          <tr>
            <th class="table-th-fixed" [apesAlign]="'center'">
              <span>投诉类别</span>
              <span>投诉类型</span>
            </th>
            <th class="table-th-dynamic" *ngFor="let col of typesOfCol" [apesAlign]="'center'">
              {{col.name}}
            </th>
            <th class="table-th-fixed" [apesAlign]="'center'">总计</th>
            <th class="table-th-fixed" [apesAlign]="'center'">较上一个月</th>
            <th class="table-th-fixed" [apesAlign]="'center'">占比</th>
<!--            <th style="width:50px" [apesAlign]="'center'">客诉率</th>-->
<!--            <th style="width:50px" [apesAlign]="'center'">较上一个月</th>-->
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let data of typesOfTable.data">
            <td class="table-th-fixed" [apesAlign]="'center'">{{data.name}}</td>
            <td class="table-th-dynamic" *ngFor="let col of typesOfCol"
                [apesAlign]="'center'">{{showRowPercentageData(data, col, col.name)}}</td>
            <td class="table-th-fixed" [apesAlign]="'center'">{{data.total != 0 ? data.total : ''}}</td>
            <td class="table-th-fixed" [apesAlign]="'center'" [ngClass]="showStaffClass(data['oldTotal'],data['total'])">
              <span *ngIf="showStaffClass(data['oldTotal'],data['total']) == 'showUp'">
                <i apes-icon apesType="arrow-up"></i>
              </span>
              <span *ngIf="showStaffClass(data['oldTotal'],data['total']) == 'showDown'">
                <i apes-icon apesType="arrow-down"></i>
              </span>
              <span>{{showStaffText(data['oldTotal'],data['total'])}}</span>
            </td>
            <td class="table-th-fixed" [apesAlign]="'center'">{{showColPercentageData(data)}}</td>
<!--            <td style="width:50px" [apesAlign]="'center'">客诉率</td>-->
<!--            <td style="width:50px" [apesAlign]="'center'">较上一个月</td>-->
          </tr>
          </tbody>
        </apes-table>


      </div>
    </div>

  </apes-card>

  <!--客诉排名-->
  <apes-card apesTitle="客诉排名">

    <!--查询区-->
    <div apes-row [apesGutter]="16" class="apes-item" style="padding: 16px;">
      <formly-form [model]="rankModel" [fields]="rankField"></formly-form>
      <div apes-col [apesSpan]="4">
        <button apes-button [apesSize]="'default'" (click)="refreshRankData()">刷新</button>
      </div>
    </div>

    <!--展示区-->
    <div apes-row [apesGutter]="16">

      <!--排名-->
      <div apes-col [apesSpan]="12">
        <apes-charts [id]="'rank'" [data]="rankData" [option]="rankOption"
                     [loading]="rankLoading" [height]="'600px'"></apes-charts>
      </div>

      <!--原因-->
      <div apes-col [apesSpan]="12">
        <apes-charts [id]="'reason'" [data]="reasonData" [option]="reasonOption"
                     [loading]="reasonLoading" [height]="'600px'"></apes-charts>
      </div>
    </div>

  </apes-card>

</div>


